import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from "antd-mobile";
import "./home.css"
import Search from "../search/search"
import myaxios from "../utils/myaxios"
import { withRouter } from "react-router-dom"

class home extends Component {
  state = {
    imgHeight: 170,
    searchlist: [],
    catitems: [], //首页分类的数据
    productData: []// 图片列表的数据
  }

  // 轮播图
  rotation = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id)
  }
   // 导航图片分类的点击
    handleCatItemClick = (params) => {
      this.props.history.push("/cation"); 
   }
   // 图片列表的点击事件
   handleImgClick = ()=>{
       this.props.history.push("/goodList/query='123'");
   }
  componentDidMount() {
    myaxios.get("home/swiperdata").then(res => {
      console.log(res)
      this.setState({
        searchlist: res
      })
    })
    /* 首页导航的数据 */
    myaxios.get("/home/catitems").then(res => {
      this.setState({
        catitems: res
      })
    })
    /* 首页图片列表 */
    myaxios.get("/home/floordata").then(res => {
      this.setState({
        productData: res
      })
    })
  }


  render() {
    return (
      <div className="yg-index">
        {/* 首页导航条开始 */}
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购商城</NavBar>
        </div>
        {/* 搜索 */}
        <div className="Search">
          <Search></Search>
        </div>
        {/* 轮播图 */}
        <div className="Rotation">
          <Carousel
            autoplay={true}
            infinite
          >
            {this.state.searchlist.map(v => (
              <div
                key={v.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                onClick={this.rotation.bind(this, v.goods_id)}
              >
                <img
                  src={v.image_src}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 首页分类导航开始 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            <Flex>
              {
                this.state.catitems.map(v => {
                  return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                    <img src={v.image_src} alt="" />
                  </Flex.Item>
                })
              }
            </Flex>
          </div>
        </div>
        {/* 首页分类导航结束 */}
        <div className="yg-index-productData">
            {
                this.state.productData.map(v=>{
                    return <div key={v.floor_title.image_src} className="productData-item">
                        {/* 标题开始 */}
                        <div className="product-title">
                            <img src={v.floor_title.image_src} alt=""/>
                        </div>
                        {/* 标题结束 */}
                        {/* 图片列表的开始 */}
                        <div className="product-image-list">
                            {
                                v.product_list.map(vv=>{
                                    return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                        <img src={vv.image_src} alt=""/>
                                    </div>
                                })
                            }
                        </div>
                        {/* 图片列表的结束 */}

                    </div>
                })
            }
        </div>
        {/* 首页图片列表结束 */}
        
      </div>
    )
  }
}
export default withRouter(home)